<!-- #layout name=blank-->
<div id="app" v-cloak>
  <div class="page-header">
    <h1 class="title">Visitor logs</h1>
    <div class="form-inline pull-right" v-if="curLogType !== 'Graphs'">
      <label class="control-label">Week</label>
      <select v-model="week" class="form-control">
        <option v-for="week in weeks">{{ week }}</option>
      </select>
    </div>
  </div>
  <kb-breadcrumb :breads="breads"></kb-breadcrumb>

  <ul class="nav nav-tabs">
    <li
      v-for="$data in logTypes"
      :class="{ active: curLogType == $data.value }"
      @click="changeLogType($data.value)"
    >
      <a href="javascript:;">{{ $data.displayName }}</a>
    </li>
  </ul>

  <kb-table v-if="curLogType == 'All'" :data="tableData" key="All">
    <kb-table-column
      :label="Kooboo.text.site.visitorLog.ip"
      head-class="ip-cell"
      prop="clientIP"
    ></kb-table-column>
    <template v-if="isOnlineServer">
      <kb-table-column :label="Kooboo.text.site.visitorLog.state">
        <template v-slot="row">
          <span :class="['label', row.state.class]">{{ row.state.text }}</span>
        </template>
      </kb-table-column>
      <kb-table-column :label="Kooboo.text.site.visitorLog.country">
        <template v-slot="row">
          <span :class="['label', row.country.class]">{{
            row.country.text
          }}</span>
        </template>
      </kb-table-column>
    </template>
    <kb-table-column :label="Kooboo.text.site.visitorLog.page">
      <template v-slot="row">
        <a
          :title="row.pageName.title"
          :href="row.pageName.url"
          :target="row.pageName.newWindow ? '_blank' : null"
          @click.stop
          style="cursor: pointer"
          >{{ row.pageName.text }}</a
        >
      </template>
    </kb-table-column>
    <kb-table-column
      :label="Kooboo.text.site.visitorLog.startTime"
      prop="begin"
    ></kb-table-column>
    <kb-table-column :label="Kooboo.text.site.visitorLog.timeElapsed">
      <template v-slot="row">
        <span :class="['badge', row.timeElapsed.class]">{{
          row.timeElapsed.text
        }}</span>
      </template>
    </kb-table-column>
    <kb-table-column
      :label="Kooboo.text.site.visitorLog.referer"
      prop="referer"
    ></kb-table-column>
    <kb-table-column
      :label="Kooboo.text.common.size"
      prop="size"
    ></kb-table-column>
    <kb-table-column :label="Kooboo.text.common.detail">
      <template v-slot="row">
        <span v-if="row.detail.text == 'NO_VALUE'">-</span>
        <a
          v-else
          @click.stop="showVisitorLogs(row.id)"
          :class="['badge', row.detail.class]"
          >{{ row.detail.text }}</a
        >
      </template>
    </kb-table-column>
  </kb-table>
  <kb-table
    v-else-if="curLogType == 'TopPages'"
    :data="tableData"
    key="TopPages"
  >
    <kb-table-column
      :label="Kooboo.text.common.name"
      prop="name"
    ></kb-table-column>
    <kb-table-column
      :label="Kooboo.text.common.size"
      prop="size"
    ></kb-table-column>
    <kb-table-column
      :label="Kooboo.text.common.pageView"
      prop="count"
    ></kb-table-column>
  </kb-table>
  <kb-table
    v-else-if="curLogType == 'TopReferer'"
    :data="tableData"
    key="TopReferer"
  >
    <kb-table-column
      :label="Kooboo.text.common.name"
      prop="name"
    ></kb-table-column>
    <kb-table-column
      :label="Kooboo.text.common.pageView"
      prop="count"
    ></kb-table-column>
  </kb-table>
  <kb-table
    v-else-if="curLogType == 'TopImages'"
    :data="tableData"
    key="TopImages"
  >
    <kb-table-column body-class="table-thumbnail">
      <template v-slot="row">
        <a
          v-if="row.thumbnail.src"
          :href="row.thumbnail.previewUrl"
          :target="row.thumbnail.newWindow ? '_blank' : null"
          @click.stop
          style="cursor: pointer"
        >
          <div class="thumbnail-fixed">
            <div class="img-wrap"></div>
            <img :src="row.thumbnail.src" />
          </div>
        </a>
        <div v-else style="text-align: center">-</div>
      </template>
    </kb-table-column>
    <kb-table-column :label="Kooboo.text.common.name">
      <template v-slot="row">
        <a
          :title="row.name.title"
          :href="row.name.url"
          :target="row.name.newWindow ? '_blank' : null"
          @click.stop
          style="cursor: pointer"
          >{{ row.name.text }}</a
        >
      </template>
    </kb-table-column>
    <kb-table-column
      :label="Kooboo.text.common.size"
      prop="size"
    ></kb-table-column>
    <kb-table-column
      :label="Kooboo.text.site.visitorLog.views"
      prop="count"
    ></kb-table-column>
  </kb-table>
  <kb-table
    v-else-if="curLogType == 'ErrorList'"
    :data="tableData"
    key="ErrorList"
  >
    <kb-table-column :label="Kooboo.text.common.URL">
      <template v-slot="row">
        <a
          :title="row.url.title"
          :href="row.url.url"
          :target="row.url.newWindow ? '_blank' : null"
          @click.stop
          style="cursor: pointer"
          >{{ row.url.text }}</a
        >
      </template>
    </kb-table-column>
    <kb-table-column :label="Kooboo.text.site.visitorLog.errorCount">
      <template v-slot="row">
        <span v-if="row.count.text == 'NO_VALUE'">-</span>
        <a
          v-else
          @click.stop="showErrorDetail(row.id)"
          :class="['badge', row.count.class]"
          >{{ row.count.text }}</a
        >
      </template>
    </kb-table-column>
  </kb-table>
  <div v-show="curLogType == 'Graphs'" class="col-md-12">
    <div class="row panel panel-default">
      <div class="panel-heading clickable" @click="toggleVisitsCharts">
        <h3 class="panel-title">Page Views</h3>
        <a class="btn btn-xs btn-link pull-right"
          ><i
            class="fa fa-2x"
            :class="visitsCharts?'fa-angle-up':'fa-angle-down'"
          ></i
        ></a>
      </div>
      <div class="panel-body" v-kb-collapsein="visitsCharts">
        <div class="row" id="monthly" style="height: 460px;"></div>
      </div>
    </div>
  </div>
  <kb-pager
    v-if="curLogType == 'All'"
    :page-nr="pager.pageNr"
    :total-pages="pager.totalPages"
    @change="changePage"
  ></kb-pager>

  <div
    v-kb-modal="isShow"
    class="modal fade"
    data-backdrop="static"
    data-keyboard="false"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button @click="resetModal" class="close"
            ><i class="fa fa-close"></i
          ></button>
          <h4 class="modal-title">Entries</h4>
        </div>
        <div class="modal-body">
          <table class="table table-hover">
            <thead>
              <tr>
                <th>Name</th>
                <th>Type</th>
                <th>Time elapsed</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="($data, index) in entries" :key="index">
                <td>{{ $data.value }}</td>
                <td>
                  <span
                    :style="{ background: Kooboo.getLabelColor($data.name) }"
                    class="label label-sm"
                    >{{ Kooboo.text.component.table[$data.name] }}</span
                  >
                </td>
                <td>
                  <span class="badge badge-success">{{
                    getElapsedTime($data.endTime, $data.startTime)
                  }}</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="modal-footer">
          <button @click="resetModal" class="btn btn-default">OK</button>
        </div>
      </div>
    </div>
  </div>
  <div
    v-kb-modal="showErrorDetailModal"
    class="modal fade"
    data-backdrop="static"
    data-keyboard="false"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button @click="hideErrorDetailModal" class="close"
            ><i class="fa fa-close"></i
          ></button>
          <h4 class="modal-title">Error detail</h4>
        </div>
        <div class="modal-body">
          <div class="table-responsive">
            <table class="table table-striped table-hover">
              <thead>
                <tr>
                  <th>IP</th>
                  <th>Status code</th>
                  <th>Message</th>
                  <th>Date</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="($data, index) in errorDetails" :key="index">
                  <td>{{ $data.ip }}</td>
                  <td>
                    <label class="label label-sm label-warning">{{
                      $data.statusCode
                    }}</label>
                  </td>
                  <td>{{ $data.message || "-" }}</td>
                  <td>{{ $data.displayDate }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="modal-footer">
          <button @click="hideErrorDetailModal" class="btn btn-default"
            >OK</button
          >
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/lib/echarts.min.js",
      "/_Admin/Scripts/components/kbTable.js",
      "/_Admin/Scripts/components/kbPager.js",
      "/_Admin/Scripts/components/kbBreadcrumb.js"
    ]);
  })();
</script>
<script src="/_Admin/View/System/VisitorLogs.js"></script>
